<template>
  <div class="home-nav">
    <a-menu v-model:selectedKeys="current" mode="horizontal" @select="selectMenus">
      <a-sub-menu v-for="menu in menus" :key="menu.id">
        <template #title>
          <span class="submenu-title-wrapper">{{ menu.name }}</span>
        </template>
        <a-menu-item v-for="child in menu.children" :key="child.url">{{
          child.name
        }}</a-menu-item>
      </a-sub-menu>
    </a-menu>
  </div>
  <router-view></router-view>
</template>

<script setup>
import { get } from "@/common";
import { ref } from "vue";
import {useRouter} from "vue-router";

const router=useRouter();

const selectMenus=({item,key,selectKeys})=>{
router.push({path:key});
};

const current = ref(["mail"]);
const menus = ref([]);
const getMenus = () => {
  get("/security/home/menus").then((res) => {
    menus.value = res.data;
  });
};
getMenus();
</script>

<style>
.home-nav {
  height: 50px;
  widows: 100%;
  text-align: center;
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.05);
}
</style>